// components/tab/tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 渲染的tab的列表
    listArr: {
      type: Array
    },
    // 选中的索引值
    active: {
      type: Number,
      default: 0
    }
  },

  observers: {
    listActive(newVal) { // 监听当前选中项
      this.setTabList()
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    listActive: 0, // 当前选中项
    tabsScrollLeft: 0, // tabs当前偏移量
    scrollLeft: 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    clickSort(event) {
      let dataset = event.currentTarget.dataset
      if (this.data.listActive != dataset.index) {
        // 返回父组件处理
        this.triggerEvent('tabchange', dataset)
      }
      this.setData({
        listActive: dataset.index
      })
    },
    changeSort(index) {
      console.log('index:::::::', index)
      this.setData({
        listActive: index
      })
    },
    // scroll-view滑动事件
    scroll(e) {
      this.setData({
        scrollLeft: e.detail.scrollLeft
      })
    },
    setTabList() {
      this.scrollIntoView()
    },
    // 计算tabs位置
    scrollIntoView() { // item滚动
      let lineLeft = 0;
      this.getElementData('#tab_list', (data) => {
        let list = data[0]
        this.getElementData('.tab_item', (data) => {
          let el = data[this.data.listActive]
          lineLeft = el.width / 2 + (-list.left) + el.left - list.width / 2 - this.data.scrollLeft
          this.setData({
            tabsScrollLeft: this.data.scrollLeft + lineLeft
          })
        })
      })
    },
    
    getElementData(el, callback) {
      wx.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
        callback(data[0]);
      });
    },
  }
})
